<!--
* @author wn
* @date 2022/08/19 15:08:25
* @description: 收货地址展示的提取 组件  主要区分 右侧  修改按钮 或者 删除按钮
!-->
<template>
	<div class="shopping-address" :class="{ border, active }">
		<div>
			<p>
				<span>收<i />货<i />人:</span>{{ showAddress.receiver }}
			</p>
			<p>
				<span>联系方式:</span
				>{{ showAddress.contact.replace(/^(.{3})(?:\d+)(.{4})$/, '$1****$2') }}
			</p>
			<p>
				<span>收货地址:</span
				>{{ showAddress.fullLocation.replace(/ /g, '') + showAddress.address }}
			</p>
		</div>
		<slot />
	</div>
</template>
<script>
export default {
	name: 'ShoppingAddress',
	props: {
		showAddress: {
			type: Object,
			default: () => ({}),
		},
		border: {
			type: Boolean,
			default: false,
		},
		active: {
			type: Boolean,
			default: false,
		},
	},
}
</script>
<style scoped lang="less">
.shopping-address {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: 1;
	&.border {
		border: 1px solid #f5f5f5;
		margin-bottom: 10px;
		cursor: pointer;
		> div {
			padding: 10px;
			font-size: 14px;
			p {
				line-height: 26px;
			}
		}
		&:hover {
			border-color: @xtxColor;
			background: lighten(@xtxColor, 50%);
		}
	}
	&.active {
		border-color: @xtxColor;
		background: lighten(@xtxColor, 50%);
	}
	> div {
		padding: 20px;
		p {
			line-height: 30px;
			span {
				color: #999;
				margin-right: 5px;
				> i {
					display: inline-block;
					width: 0.5em;
				}
			}
		}
	}
}
</style>
